<template>
  <div style="width: 100%;height: 100%">

    <el-backtop :bottom="100">
      <div
        style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
      >
        UP
      </div>
    </el-backtop>
    <el-divider content-position="center" style="margin-top: 20px;">
      <span class="font-stu">为 你 推 荐</span>
    </el-divider>
    <el-row style="margin-top: 50px" v-loading="loading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">
      <el-col
        :span="6"
        v-for="(goods, i) in goodsList"
        :key="i"
        :offset="i > -1 ? 0 : 0"
      >
        <el-card :body-style="{ padding: '3px' } " shadow="hover">
          <el-image
            :src="goods.goodsPic"
            class="image" lazy
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <div style="padding: 14px;text-align: left">
            <el-tooltip class="item" effect="light" :content="goods.goodsName" placement="top-start">
              <el-link :underline="false" class="span-box">
                <span style="font-size: 15px;width: 100%" v-text="goods.goodsName"></span>
              </el-link>
            </el-tooltip>
            <div class="bottom clearfix">
              <span style="font-size: 13px" v-text="goods.businessName"></span>

              <span class="price"><em>￥</em>{{ goods.goodsPrice }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-result subTitle="已经到底了~~" v-show="!loading && !is_error">
    </el-result>
  </div>

</template>

<script>
import {goodsRecommendList} from '@/api';

export default {
  name: "home-vue",
  data() {
    return {
      goodsList: [{}],
      loading: true,
      is_error: false
    };
  },
  methods: {
    // 获取商品推荐列表
    recommendGoodsPanel() {
      goodsRecommendList().then(res => {
        this.goodsList = res.data.result;
        this.loading = false
      }).catch(error => {
        this.loading = false
        this.is_error = true
      })
    },
  },
  mounted() {
    this.recommendGoodsPanel();
  },
};
</script>

<style scoped>
.bottom {
  margin-top: 20px;
  line-height: 15px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 380px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.font-stu {
  font-size: 30px;
  font-weight: bold;
}

.span-box {
  height: 40px;
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

a:link {
  color: black;
}

a:visited {
  color: #9b9b9b;
}

a:hover {
  color: #1989fa;
}

a {
  color: black;
}

.price {
  float: right;
  color: #ff5000;
}
</style>
